import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/bean/bean_video.dart';
import 'package:flutter_learn_vi/src/bean/bean_video_course.dart';
import 'package:flutter_learn_vi/src/page/common/common_loading_dialog.dart';
import 'package:flutter_learn_vi/src/page/common/common_nodata_widget.dart';
import 'package:get/get.dart';

import 'course_http_model.dart';
import 'course_video_detail_page.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2021/1/13.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
///
///课程目录  视频列表
class CourseCataloguePage extends StatefulWidget {
  final BeanVideoCourse beanVideoCourse;
  final bool shrinkWrap;
  final int trainId;
  final int taskId;
  const CourseCataloguePage(
      {Key key,
      @required this.beanVideoCourse,
      this.shrinkWrap = false,
      this.trainId,
      this.taskId})
      : super(key: key);

  @override
  _CourseCataloguePageState createState() => _CourseCataloguePageState();
}

class _CourseCataloguePageState extends State<CourseCataloguePage>
    with CourseHttpModel {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration.zero, () {
      _getViceoList();
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return LoadingWidget();
    }
    if (_list == null || _list.length == 0) {
      return NoDataWidget(
        text: "课程内容即将更新",
      );
    }
    //否则会拦截事件 失去滑动联动效果
    return Container(
      padding: EdgeInsets.only(bottom: 12),
      child: ListView.separated(
        shrinkWrap: widget.shrinkWrap,
        //去除内边距
        padding: EdgeInsets.only(top: 8),
        //列表子Item个数
        itemCount: _list.length,
        //每个子Item的布局构建
        itemBuilder: (BuildContext context, int index) {
          return buildBodyWidget(index);
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(
            child: Divider(),
            color: Colors.white,
          );
        },
      ),
    );
  }

  //每个子Item的布局构建
  Widget buildBodyWidget(int index) {
    VideoModel model = _list[index];
    // 课件类型 0 视频 1 PPT 2 Word
    String tagText = '视频';
    if (model.videoTypes == 0) {
      tagText = '视频';
    } else if (model.videoTypes == 1) {
      tagText = 'PPT';
    } else if (model.videoTypes == 2) {
      tagText = '视频';
    } else {
      tagText = '其他';
    }
    //水波纹点击事件监听
    return InkWell(
      //手指点击抬起时的回调
      onTap: () async {
        await Get.to(() => CourseVideoDetailsPage(
              videoCourseId: widget.beanVideoCourse.id,
              videoIndex: index,
              videoId: model.id,
              trainId: widget.trainId,
              taskId: widget.taskId,
              pageTag: "课程详情页面 目录列表",
            ));
        setState(() {
          _isLoading = true;
        });
        _getViceoList();
      },
      child: Container(
        padding: EdgeInsets.only(left: 12, right: 12),
        color: Colors.white,
        //线性布局左右排列
        child: Row(
          //主轴方向开始对齐 在这里是左对齐
          mainAxisAlignment: MainAxisAlignment.start,
          //交叉轴上开始对齐 在这里是顶部对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //左侧的图片
            buildLeftImage(tagText, model.videoName, index),
            //右侧的文本区域
            buildRightTextArea(index)
          ],
        ),
      ),
    );
  }

  ///标题
  Container buildLeftImage(String tagText, String videoName, int index) {
    return Container(
      margin: EdgeInsets.only(right: 12, top: 4),
      padding: EdgeInsets.all(1),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(2)),
        border: Border.all(
          color: Colors.blueGrey,
          width: 1.0,
        ),
      ),
      child: Text(
        "$tagText ${index + 1} ",
        style: TextStyle(fontSize: 8, color: Colors.blueGrey),
      ),
    );
  }

  ///右侧的文本区域
  Expanded buildRightTextArea(int index) {
    VideoModel model = _list[index];
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "${model.videoName}",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(fontSize: 16),
          ),
          SizedBox(height: 8),
          buildRightProgressText(model),
        ],
      ),
    );
  }

  Widget buildRightProgressText(VideoModel model) {
    int userStatues = model.userStatues;
    String finishPercent = model.finishPercent;
    String leftText = "";
    Color textColor = Colors.grey;
    if (userStatues == -1) {
      leftText = "未学习";
      textColor = Colors.grey;
    } else if (userStatues == 1) {
      leftText = "进行中  $finishPercent";
      textColor = Colors.blue;
    } else if (userStatues == 2) {
      leftText = "已完成";
      textColor = Colors.green;
    }
    return Row(
      children: [
        Text(
          leftText,
          style: TextStyle(fontSize: 12, color: textColor),
        ),
      ],
    );
  }

  List<VideoModel> _list;

  bool _isLoading = true;

  Future<bool> _getViceoList() async {
    _list = await getVideoList(
        videoCourseId: widget.beanVideoCourse.id, trainId: widget.trainId);
    _isLoading = false;
    if (!mounted) return true;
    setState(() {});

    return Future.value(true);
  }
}
